<template>
<!--   //@click-nav="treeClick"-->
    <van-tree-select height="100vh" :items="items" :main-active-index.sync="active" @click-nav="treeClick">
        <template #content style="margin-top: 20px">
          <div>
            <van-grid :column-num="4">
              <van-grid-item  v-for="category2 in catalog2s" :key="category2.id" :text="category2.name"
                              :icon="category2.imgUrl" @click="catalog2Click(category2.id)"></van-grid-item>
            </van-grid>
          </div>
        </template>
    </van-tree-select>
</template>

<script>
    import Vue from 'vue';
    import { TreeSelect, } from 'vant';
    import {ApiService} from "../../axios/apiService";

    const catalog1 = new ApiService('/iteam/catalog1')
    Vue.use(TreeSelect);
    export default {
        props: {
        },
        data() {
            return {
                index:'',
                active: 0,
                items: [],
                catalog1s:[],
                catalog2s:[],
            }
        },
        mounted() {
            this.getCatalog1()
        },
        methods:{
            getCatalog1() {
                catalog1.getViewList().then(res => {
                    res.data.data.forEach(item=>{
                      this.items.push(this.beforeDataProcess(item))
                    })
                })
                },
            beforeDataProcess(data) {
                return{
                    text:data.name,
                    id:data.id,
                }
            },
            treeClick(index) {
                var cate = this.items[index]
                console.log(cate)
                const api = new ApiService("/category2")
                api.getViewById(cate.id).then(res=>{
                    this.catalog2s=res.data.data;
                })
            },
            catalog2Click(catalog2Id) {
                console.log(catalog2Id);
                this.$router.push({name:"bookList",params:{
                    catalog2Id:catalog2Id,
                    key:"category"
                }})
            }
        }
    };
</script>
